<template>
  <div style="margin-top: 10px">
    <a-table
        :columns="columns"
        :data-source="page.list"
        :pagination="pagination"
        @change="handleTableChange"
    >
      <template #user_name="{ text }">
        <span>
          <smile-outlined/>
          {{ text }}
        </span>
      </template>

      <template #grade="{ text }">
        <span>
          <a-tag :color="text < 20 ? 'green' : text < 30 ? 'yellow' : 'red'">
            <div v-if="text < 20">
              <smile-outlined/>
              {{ text }}
            </div>
            <div v-if="(20 <= text) & (40 >= text)">
              <meh-outlined/>
              {{ text }}
            </div>
            <div v-if="text > 40">
              <frown-outlined/>
              {{ text }}
            </div>
          </a-tag>
        </span>
      </template>

      <template #expect_time="{ text }">
        <span>
          <history-outlined/>
          {{ text }}
        </span>
      </template>

      <template #email="{ text }">
        <span>
          <mail-outlined/>
          {{ text }}
        </span>
      </template>
      <template #status="{ text }">
        <span>
          <span v-if="text==='finish'">
            <carry-out-outlined/>
          </span>
          <span v-else>
            <comment-outlined/>
          </span>
          &ensp; <a-tag>{{ text }}</a-tag>
        </span>
      </template>
      <template #action="{ record }">
        <a @click="openFinish(record)" v-if="record.status === 'visiting'"
        >结论</a
        >
        <a @click="getInfo(record)" v-if="record.status === 'waitConsult'"
        >查看初访详情</a
        >
        <a @click="getInfo(record)" v-if="record.status === 'consulting'"
        >查看初访详情</a
        >
        <a @click="getInfo(record)" v-if="record.status === 'finish'"
        >查看初访详情</a
        >
      </template>
    </a-table>
  </div>

  <a-modal v-model:visible="visible1" title="登记结果" @ok="finishVisitRecord">
    <a-form-item label="请选择初访结论类型">
      <a-select
          ref="select"
          v-model:value="finishVisitData.type"
          style="width: 120px"
      >
        <a-select-option value="health"
        ><span style="color: green">无需咨询</span></a-select-option
        >
        <a-select-option value="needConsult"
        ><span>安排咨询</span></a-select-option
        >
        <a-select-option value="needDoctor"
        ><span style="color: red">转接送诊</span></a-select-option
        >
      </a-select>
    </a-form-item>

    <a-form-item label="请选择结束时间">
      <a-date-picker v-model:value="finishVisitData.endtime"/>
    </a-form-item>

    <a-form-item label="结论简述">
      <a-textarea v-model:value="finishVisitData.result"/>
    </a-form-item>
  </a-modal>

  <a-modal v-model:visible="ItemVisible" title="详细情况" @ok="closeCard">
    <a-card title="学生情况" style="width: 450px">
      <span label="初访结果类型" v-if="ItemData.type==='needConsult'">初访结果类型: 安排咨询 <br/></span>
      <span label="初访结果类型" v-if="ItemData.type==='needDoctor'" style="color:red">初访结果类型: 转接送诊 <br/></span>
      <span label="初访结果类型" v-if="ItemData.type==='healthy'">初访结果类型: 无需咨询 <br/></span>
      <span label="结束时间"> 结束时间: {{ ItemData.endtime }} <br/></span>
      <span label="初访结果"> 初访结果 :{{ ItemData.result }} <br/></span>
    </a-card>
  </a-modal>
</template>

<script setup>
////////////////////////////////////////////
import {reactive, ref} from "vue";
import {post, setLocalToken} from "@/common";
import {useRouter} from "vue-router";
import {get} from "@/common";
import {message} from "ant-design-vue";
//import {DownloadOutlined} from "";
////////////////////////////////////////////

const columns = [
  {
    dataIndex: "visit_id", //
    title: "初访ID",
    slots: {
      customRender: "visit_id",
    },
  },
  {
    dataIndex: "user_name", //
    title: "学生姓名",
    slots: {
      customRender: "user_name",
    },
  },
  {
    dataIndex: "grade", //
    title: "状况评分",
    slots: {
      customRender: "grade",
    },
  },
  {
    dataIndex: "expect_time", //
    title: "期望时间",
    slots: {
      customRender: "expect_time",
    },
  },
  {
    dataIndex: "email", //
    title: "邮箱",
    slots: {
      customRender: "email",
    },
  },
  {
    dataIndex: "status", //
    title: "状态",
    slots: {
      customRender: "status",
    },
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];

const user = reactive({
  user_id: "",
});

const getInfo = (record) => {
  postBody.visit_id = record.visit_id
  ItemVisible.value = true;
  post("/consultor/visitRecord/getVisitInfo", postBody).then((res) => {
    if (res.success) {
      ItemData.endtime = res.data[0].endtime;
      ItemData.type = res.data[0].type;
      ItemData.result = res.data[0].result;
    } else {
      message.error("系统错误");
    }
  })
};

const page = ref({});

const visible1 = ref(false);

const ItemVisible = ref(false);

const finishVisitData = reactive({
  visit_id: "",
  result: "",
  endtime: "",
  type: "",
});

const ItemData = reactive({
  result: "",
  endtime: "",
  type: "",
});

const postBody = reactive({
  visit_id: ""
})
///////////////////////////////////////////
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
        "共" +
        total +
        "条记录,当前第" +
        pagination.current +
        "页" +
        (range[1] - range[0] + 1) +
        "条记录"
    );
  },
});

const getPage = (pageNum = 1) => {
  user.pageNum = pageNum;
  user.pageSize = pagination.pageSize;

  post("/consultor/visitRecord/getInfo", user).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;

    console.log(res.data.list);
  });
};

getPage(1);

const handleTableChange = (pagi, filters, sorter, {currentDataSource}) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

////////////////////////////////////////////

const closeCard = () => {
  ItemVisible.value = false;
  ItemData.type = "";
  ItemData.result = "";
  ItemData.endtime = "";
};

const openFinish = (record) => {
  visible1.value = true;
  finishVisitData.visit_id = record.visit_id;
};

const finishVisitRecord = () => {
  finishVisitData.endtime = finishVisitData.endtime.format("YYYY.MM.DD");

  post("/consultor/visitRecord/finishVisit", finishVisitData).then((res) => {
    if (res.success) {
      message.success(res.message);
    } else {
      message.error(res.message);
    }
    finishVisitData.visit_id = "";
    finishVisitData.result = "";
    finishVisitData.endtime = "";
    finishVisitData.type = "";
    visible1.value = false;
    getPage(1);
  });
};
</script>

<style>
</style>
